<template>
  <div class="login-main animate__animated animate__bounceInRight">
        <van-cell-group inset>
          <van-field
        v-model="formQuery.username"
        name="validator"
        left-icon="contact-o"
        placeholder="请输入用户名"
      />
          <van-field
            v-model="formQuery.email"
            name="validator"
            left-icon="envelop-o"
            placeholder="请输入邮箱"
          />
          <div class="email-code">
        <van-field
          v-model="formQuery.code"
          left-icon="envelop-o"
          placeholder="请输入邮箱验证码"
        />
        <van-button plain type="primary" class="get-code" @click="getCode()" v-show="showbutton">获取验证码</van-button>
        <van-button disabled type="primary" class="get-code" v-show="!showbutton">{{ time }}秒后重试</van-button>
      </div>
        </van-cell-group>
        <van-button type="primary" block class="login-button" @click="ForgetSubmit()">提交修改</van-button>
        <div class="footer">
          想起密码了？<span class="register" @click="skipto('login')">返回登录</span>
        </div>
      </div>
  </template>
  <script setup>
  import { showSuccessToast, showFailToast } from 'vant';
  import { ref, defineEmits } from 'vue'
  import { forgetTestService, getCodeForgetService } from '@/api/Login'
  
  
  const formQuery = ref({// 登录表单数据
    username: '',
    email: '',
    code: '',
  })
  const initialTime = 60;//  倒计时
  const time = ref(60);//  倒计时
  const showbutton = ref(true);//  发送验证码按钮
  const skip = defineEmits(['skipto'])
  const validator = (val) => {
    return '不合法'
  }
  
  const skipto = (newpage) => {
    skip('skipto', newpage)
  }
  /**
 *  邮箱格式验证
 * 
 */
const validateEmail = (email) => {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
};

/**
 *  获取邮箱验证码
 */
 const getCode = () => {
  if (!formQuery.value.email || !validateEmail(formQuery.value.email)) {
    showFailToast('请输入有效的邮箱地址');
    
    return false;
  }
  getCodeForgetService(formQuery.value.email).then((res) => { 
    showSuccessToast('获取验证码成功');
  });
  time.value = initialTime;
  const timer = setInterval(() => {
    if (time.value > 0) {
      showbutton.value = false;
      time.value -= 1;
    } else {
      showbutton.value = true;
      clearInterval(timer);
      time.value = initialTime;
    }
  }, 1000);
};

/**
 * 表单验证
 */
const formtest  = () => { 
  if (!formQuery.value.username) {
    showFailToast('请输入用户名');
    return false;
  }
  if (!formQuery.value.email || !validateEmail(formQuery.value.email)) {
    showFailToast('请输入有效的邮箱地址');
    return false;
  }
  if (formQuery.value.code.length != 6) {
    showFailToast('验证码格式错误');
    return false;
  }
  return true
}
/**
 *  忘记密码提交
 */
const ForgetSubmit = () => {
  if (formtest()) {
    forgetTestService(formQuery.value)
    .then((res) => { 
      localStorage.setItem('userid',res.data);
      localStorage.setItem('email',formQuery.value.email);
      skipto('ReplacePassword');
    });
  }
}
  </script>
  <style lang="scss" scoped>
  .login {
    background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 120px;
      .title {
        margin-top: 70px;
        font-size: 22px;
        letter-spacing: 2px;
        color: #fff;
      }
      .login-main {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 20px;
        width: 90%;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 24px;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        :deep(.van-field__left-icon) {
          color: #72bddb;
        }
        :deep(.login-button) {
          background: #72bddb;
          margin-top: 20px;
          width: 70vw;
          border-radius: 15px;
          border: none;
        }
        :deep(.van-cell-group){
          width: 80vw;
        }
        .line-box {
            width: 100%;
            display: flex;
            align-items: center;
            margin: 20px 0px;
  
            .line {
              flex: 1;
              height: 2px;
              background: rgba(0, 0, 0, 0.1);
            }
  
            .line-text {
              padding: 0 10px;
              color: #999;
              font-size: 14px
            }
          }
  
          .footer {
            padding-top: 15px;
            font-size: 14px;
            color: #999;
  
            .register {
              color: #72bddb;
            }
          }
      }
  
  }
  
  
  ::v-deep.van-cell-group {
    background-color: transparent;
  }
  ::v-deep.van-cell {
    background-color:transparent;
  }
  .email-code {
  display: flex;
  justify-content: space-between;
}
::v-deep.get-code {
  font-size: 14px;
  width: 120px;
  padding: 0;
  height: 40px;
  border: none;
  background-color: rgba(114, 189, 219, 0.3);
}
  </style>